{extend name="common:base" /}
{block name="page_current"}
<div class="fui-page-group statusbar">
    <style>
        .fui-list-group-title.lineblock2:before{
            content: "";
            position: absolute;
            left: .5rem;
            bottom: 0;
            right: .5rem;
            height: 1px;
            border-top: 1px solid #ebebeb;
            -webkit-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    </style>
    <div class="fui-page order-list-page fui-page-current">
        <div class="fui-header">
            <div class="fui-header-left">
                <a class="back"></a>
            </div>
            <div class="title">我的订单</div>
            <!--
            <div class="fui-header-right">
                <a class="icon icon-delete external" style="color: rgb(153, 153, 153);">回收站</a>
            </div>
            -->
        </div>
        <div id="tab" class="fui-tab fui-tab-danger">
            <a data-tab="tab" class="external {if('0' == $status)}active{/if}" data-status="0">全部</a>
            <a data-tab="tab0" class="external {if('1' == $status)}active{/if}" data-status="1">待付款</a>
            <a data-tab="tab1" class="external {if('2' == $status)}active{/if}" data-status="2">待发货</a>
            <a data-tab="tab2" class="external {if('3' == $status)}active{/if}" data-status="3">待收货</a>
            <a data-tab="tab3" class="external {if('4' == $status)}active{/if}" data-status="4">已完成</a>
        </div>
        <div class="fui-content order-list">
            <div class="fui-content-inner">
                <div class="content-empty">
                    <img src="__STATIC__/m/imgs/nolist.png" style="width: 6rem;margin-bottom:.5rem;">
                    <br>
                    <p style="color: #999;font-size: .75rem">您暂时没有任何订单哦！</p>
                    <br>
                    <a href="{:url('Index/index')}" class="btn btn-sm btn-danger-o external"
                       style="border-radius: 100px;height: 1.9rem;line-height:1.9rem;width:  7rem;font-size: .75rem">
                        去首页逛逛吧
                    </a>
                </div>
                <div class="container" id="order-index-list"></div>
                <div class="infinite-loading" style="display: none;"><span class="fui-preloader"></span><span class="text"> 正在加载...</span></div>
            </div>
        </div>
        <script id="tpl_order_index_list" type="text/html">
            {{#  layui.each(d.list, function(index, item){ }}
            <div class="fui-list-group order-item" data-orderid="{{ item.id }}" data-verifycode="">
                <a href="javascript:gotoOrderDetail({{ item.id }});" data-nocache="true">
                    <div class="fui-list-group-title lineblock2">
                        订单号: {{ item.order_no }}
                        <span class="status {{ getStatusCss(item.status) }}">{{ item.status_text }}</span>
                    </div>
                    {{#  layui.each(item.subs, function(gi, g){ }}
                    <div class="fui-list goods-list">
                        <div class="fui-list-media" style="">
                            <img class=""
                                 src="{{ getGoodsThumb(g.goods_thumbs) }}"
                                 data-lazyloaded="true">
                        </div>
                        <div class="fui-list-inner">
                            <div class="text goodstitle towline">{{ g.goods_name }}</div>
                            {{# if('默认' != g.goods_option_title ){ }}
                            <div class="subtitle" style="color:#999;">{{ g.goods_option_title }}</div>
                            {{#  } }}
                        </div>
                        <div class="fui-list-angle">
                            ¥
                            <span class="marketprice">
                                {{ g.market_price }}
                                <br>
                                <span style="color: #999">x{{ g.total }}</span>
                            </span>
                        </div>
                    </div>
                    {{#  }); }}
                    <div class="fui-list-group-title lineblock">
                        <span class="status noremark">
                            共
                            <span>{{ item.subs.length }}</span>
                            个商品 实付:
                            <span class="text-danger">¥ <span class="bigprice">{{ item.payable }}</span></span>
                        </span>
                    </div>
                </a>
                <div class="fui-list-group-title lineblock   opblock">
                    <span class="status noremark">
                        {{# if(4 == item.status ){ }}
                        <div class="btn btn-default btn-default-o order-delete" onclick="delOrder({{ item.id }});">删除订单</div>
                        {{#  } }}
                        {{# if(1 == item.status ){ }}
                        <div class="btn btn-default btn-default-o order-cancel">取消订单
                            <select data-orderid="{{ item.id }}" class="btn btn-sm btn-default-o" onchange="orderCancel(this)">
                                <option value="">不取消了</option>
                                <option value="我不想买了">我不想买了</option>
                                <option value="信息填写错误，重新拍">信息填写错误，重新拍</option>
                                <option value="同城见面交易">同城见面交易</option>
                                <option value="其他原因">其他原因</option>
                            </select>
                        </div>
                        {{#  } }}
                        {{# if(1 == item.status ){ }}
                        <a class="btn btn-sm btn-danger-o external" href="{:url('pay')}?id={{ item.id }}">支付订单</a>
                        {{#  } }}
                        {{# if(item.status > 2 ){ }}
                        <a class="btn btn-default btn-default-o" href="{:url('express')}?id={{ item.id }}" data-nocache="true">查看物流</a>
                        {{#  } }}
                        {{# if(3 == item.status ){ }}
                        <a class="btn btn-sm btn-danger-o order-finish" href="javascript:finishOrder({{ item.id }});">确认收货</a>
                        {{#  } }}
                    </span>
                </div>
            </div>
            {{#  }); }}
        </script>
        <div class="order-verify-hidden" style="display: none;">
            <div class="verify-pop">
                <div class="code_box">
                    <p>请将二维码出示给核销员</p>
                    <div class="img_box">
                        <img class="qrimg" src="">
                    </div>
                    <div class="cav_code"></div>
                    <div class="error">
                        <p style="padding: 0 1.3rem">温馨提示：为了更好的保护您利益,请不要轻易将您的核销二维码泄露给他人</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="__STATIC__/layer/layui.js"></script>
    <script src="__STATIC__/layer/laytpl.js"></script>
    <script>
        var pageIndex = 1;
        function getStatusCss(_status) {
            switch (_status) {
                case 4:
                    return 'text-success';
                case 3:
                    return 'text-danger';
                case 2:
                    return 'text-warning';
                case 1:
                default:
                    return 'text-cancel';
            }
        }
        function getGoodsThumb(_thumbs) {
            if(!_thumbs){
                return '';
            }
            var tmp = _thumbs.split(',');
            return tmp[0];
        }
        function getOrderList() {
            core.json("{:url('index')}",{status:$('#tab a.active').data('status'),p:pageIndex},function (json) {
                if(json.code){
                    var view = document.getElementById('order-index-list');
                    var result = json.data;
                    if (result.total <= 0) {
                        $('.content-empty').show(0);
                        $('.fui-content').infinite('stop')
                    } else {
                        $('.content-empty').hide(0);
                        $('.fui-content').infinite('init');
                        if (result.list.length <= 0 || result.list.length < result.pagesize) {
                            $('.fui-content').infinite('stop')
                        }
                    }
                    pageIndex++;

                    var getTpl = $('#tpl_order_index_list').text();
                    layui.laytpl(getTpl).render({list:json.data.list}, function(html){
                        view.innerHTML = html;
                    });


                }
            },true,false);
        }
        function infinite() {
            $('.fui-content').infinite({
                onLoading: function() {
                    getOrderList()
                }
            })
        }
        $(function () {
            infinite();

            $('#tab a').on('click',function () {
                $('#tab a').removeClass('active');
                $(this).addClass('active')
                $('#order-index-list').html('');
                pageIndex = 1;
                getOrderList()
            })

            getOrderList();
        })

        function delOrder(_orderId) {
            console.log('delOrder ' + _orderId)
            FoxUI.confirm('确认要删除该订单吗?',function () {
                core.json("{:url('del_order')}",{id:_orderId},function (json) {
                    FoxUI.toast.show(json.msg)
                    if(json.code){
                        $('div.order-item[data-orderid="'+_orderId+'"]').remove();
                    }
                },true,false);
            });
        }
        function finishOrder(_orderId) {
            console.log('finishOrder ' + _orderId)

            FoxUI.confirm('确认已收到货了吗?',function () {
                core.json("{:url('finish_order')}",{id:_orderId},function (json) {
                    FoxUI.toast.show(json.msg)
                    if(json.code){
                        $('div.order-item[data-orderid="'+_orderId+'"]').remove();
                    }
                },true,false);
            });
        }
        function orderCancel(_obj) {
            var val = $(_obj).val();
            var orderId = $(_obj).data('orderid');
            if(val){
                FoxUI.confirm('确认要取消该订单吗?',function () {
                    core.json("{:url('cancel_order')}",{id:orderId,remark:val},function (json) {
                        FoxUI.toast.show(json.msg)
                        if(json.code){
                            $('div.order-item[data-orderid="'+orderId+'"]').remove();
                        }
                    },true,false);
                });
            }
        }

        function gotoOrderDetail(_orderId) {
            var baseDetailUrl = "{:url('m/Order/detail')}";
            $.router.load(baseDetailUrl + '?id=' + _orderId);
        }
    </script>
</div>
{/block}
{block name="script"}
{/block}